<template>
	<view class="container">
		<!-- 头部导航栏 -->
		<view class="header">
			<view class="nav-back" @click="goBack">
				<uv-icon name="arrow-left" size='32'></uv-icon>
			</view>
			<text class="header-title">浏览历史</text>
			<view class="manage">
				<text @tap="handleManage">管理</text>
			</view>
		</view>
		<!-- 历史记录列表 -->
		<view v-if="historyList.length === 0" class="empty">
			<image src="/static/empty-history.png" mode="widthFix" />
			<text>暂无浏览记录</text>
		</view>
		<scroll-view class="history-list" scroll-y>
			<view v-for="(item, index) in historyList" :key="index" class="history-item">
				<!-- 书籍封面 -->
				<image :src="item.cover" class="book-cover" mode="aspectFill" />

				<!-- 书籍信息 -->
				<view class="book-info">
					<text class="title">{{ item.title }}</text>
					<text class="chapter">{{ item.chapter }}</text>
				</view>

				<!-- 操作按钮 -->
				<view class="action-btn">
					<text v-if="!item.added" class="add-btn" @tap="handleAdd(index)">
						加入书架
					</text>
					<text v-else class="added-text">已加入</text>
				</view>
			</view>
		</scroll-view>
		<!-- 加载状态 -->
		<uv-loading v-if="loading" mode="circle" color="#ff6a3d" class="loading" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				historyList: [{
					cover: "/static/images/bases/baseimg.png",
					title: "斗罗大陆",
					chapter: "第一章 斗罗大陆...",
					added: false
				},
				 {
				 	cover: "/static/images/bases/baseimg.png",
				 	title: "斗罗大陆",
				 	chapter: "第一章 斗罗大陆...",
				 	added: false
				 },
				 {
				 	cover: "/static/images/bases/baseimg.png",
				 	title: "斗罗大陆",
				 	chapter: "第一章 斗罗大陆...",
				 	added: true
				 },
				 {
				 	cover: "/static/images/bases/baseimg.png",
				 	title: "斗罗大陆",
				 	chapter: "第一章 斗罗大陆...",
				 	added: true
				 },
				 {
				 	cover: "/static/images/bases/baseimg.png",
				 	title: "斗罗大陆",
				 	chapter: "第一章 斗罗大陆...",
				 	added: true
				 }]
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			handleManage() {
				this.editing = !this.editing
				if (this.editing) {
					this.selectedItems = []
				}
			},
			handleAdd(index) {
				this.$set(this.historyList[index], 'added', true)
				uni.showToast({
					title: '已加入书架',
					icon: 'none'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #f6f8fa;
	}

	/* 头部导航栏样式 */
	.header {
		display: flex;
		align-items: center;
		padding: 24rpx 32rpx;
		background: #fff;

		/* 左侧返回按钮 */
		.nav-back {
			flex-shrink: 0;
		}

		/* 标题居中 */
		.header-title {
			flex: 1;
			text-align: center;
			font-size: 36rpx;
			color: #333;
			padding: 0 20rpx;
		}

		/* 右侧管理按钮 */
		.manage {
			flex-shrink: 0;
			margin-left: auto;
			font-size: 32rpx;
		}
	}

	// 空状态
	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 历史记录列表 */
	.history-list {
		padding: 32rpx;
		height: calc(100vh - 120rpx);
		
		::v-deep .uni-scroll-view-content{
			width: 90% !important;
		}
	}

	.history-item {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;

		.book-cover {
			width: 160rpx;
			height: 220rpx;
			border-radius: 8rpx;
			margin-right: 32rpx;
		}

		.book-info {
			flex: 1;

			.title {
				display: block;
				font-size: 34rpx;
				color: #333;
				font-weight: 500;
				margin-bottom: 16rpx;
			}

			.chapter {
				font-size: 28rpx;
				color: #666;
				line-height: 1.4;
			}
		}

		.action-btn {
			.add-btn {
				padding: 12rpx 32rpx;
				border: 1rpx solid #ff6a3d;
				border-radius: 40rpx;
				color: #ff6a3d;
				font-size: 28rpx;
			}

			.added-text {
				color: #ff6a3d;
				font-size: 28rpx;
			}
		}
	}
</style>